<template>
	<view class='person_box'>
		<view class="header">

			<image src="../../static/baizuo.png" mode="" style="width: 45upx;height: 45upx;" @click="back"></image>
			<text style="font-size: 36upx;margin-left: 30upx;color: #fff;">个人主页</text>
		</view>
		<view
			style="display: flex;color: #fff;justify-content: space-between;padding-bottom: 0;padding: 20rpx 0;flex-direction: column;padding-top: 70px;"
			v-if="userInfo.id !== useinfo.id">
			<view class="tou" style="flex-direction: row;align-items: center;justify-content: space-around;">
				<img :src="useinfo.headimgurl" alt="" style="width: 180upx;height: 180upx;border-radius: 50%;"
					@click="previewImg">

				<view class='follow' @click="guanzhu" v-if="useinfo.is_follow == 0"
					v-show="userInfo.id !== useinfo.id">
					+关注
				</view>
				<view v-else class='follow' @click="reduceFollow" style="background-color: #242730;"
					v-show="userInfo.id !== useinfo.id">
					已关注
				</view>
				<view class="sixin" @click="tosixin(useinfo.toid)">
					<image src="../../static/xiaoxi.png" mode="" style="width: 38upx;height: 36upx;"></image>
					<text style="color: #FFFFFF;padding-left: 10upx;">私信</text>
				</view>
				<image src="../../static/nan.png" mode=""
					style="width: 30upx;height: 30upx;position: absolute;top: 10upx;left: 146upx;"
					v-show="sexindex == 1"></image>
				<image src="../../static/nv.png" mode=""
					style="width: 30upx;height: 30upx;position: absolute;top: 10upx;left: 146upx;"
					v-show="sexindex == 2"></image>
			</view>
			<text style="font-size: 36upx;color: #fff;padding: 30upx;">{{useinfo.user_name}}</text>
		</view>
		<view
			style="display: flex;color: #fff;justify-content: space-between;padding-bottom: 0;padding: 20rpx 0;flex-direction: column;padding-top: 70px;"
			v-else>
			<view class="tou" style="flex-direction: row;align-items: center;justify-content: flex-start;">
				<img :src="useinfo.headimgurl" alt="" style="width: 180upx;height: 180upx;border-radius: 50%;">

				<view class='follow' @click="guanzhu" v-if="useinfo.is_follow == 0" v-show="userInfo.id !== useinfo.id">
					+关注
				</view>
				<view v-else class='follow' @click="reduceFollow" style="background-color: #242730;"
					v-show="userInfo.id !== useinfo.id">
					已关注
				</view>
				<image src="../../static/nan.png" mode=""
					style="width: 30upx;height: 30upx;position: absolute;top: 10upx;left: 146upx;"
					v-show="sexindex == 1"></image>
				<image src="../../static/nv.png" mode=""
					style="width: 30upx;height: 30upx;position: absolute;top: 10upx;left: 146upx;"
					v-show="sexindex == 2"></image>
			</view>
			<text style="font-size: 36upx;color: #fff;padding: 30upx;">{{useinfo.user_name}}</text>
		</view>

		<view class="jieshao">
			<view style="display: flex;align-items: center;padding-left: 30upx;">

				<text style="color: #fff;font-size: font-size: 30upx;padding-right: 20upx;" v-if="useinfo.evaluation">
					{{useinfo.evaluation}}
				</text>
				<input type="text" value="" placeholder="点击添加介绍，让大家认识你" v-else disabled />
				<!-- <image src="../../static/images/icon-editWhite.png" mode="" style="width: 30upx;height: 30upx;" @click="tobianji()" v-show="pan==1"></image> -->
			</view>
			<view style="display: flex;font-size: 30upx;padding: 30upx;padding-bottom: 0;align-items: center;">
				<view style="display: flex;align-items: center;">
					<text style="color: #fff;">{{useinfo.myfollow_num}}</text>
					<text style="color: #999999;padding-left: 5upx;">关注</text>

				</view>
				<view style="display: flex;padding-left: 50upx;align-items: center;">
					<text style="color: #fff;">{{useinfo.followme_num}}</text>
					<text style="color: #999999;padding-left: 5upx;">粉丝</text>

				</view>
				<view style="display: flex;padding-left: 50upx;align-items: center;">
					<text style="color: #fff;">{{useinfo.videoaccess_num}}</text>
					<text style="color: #999999;padding-left: 5upx;">浏览量</text>

				</view>
			</view>
			<view class="person_center">
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;flex-wrap: wrap;">
						<view class="desc_box" v-if="useinfo.salary">
							{{useinfo.salary}}
						</view>
						<view class="desc_box" style="margin-left: 15upx;" v-if="useinfo.edu_name">
							{{useinfo.edu_name}}
						</view>
						<view class="desc_box" style="margin-left: 15upx;margin-right: 15upx;" v-if="useinfo.pos_name">
							{{useinfo.pos_name}}
						</view>
						<view class="desc_boxw" v-if="useinfo.city_name" style="">
							期望城市：{{useinfo.city_name}}
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="works">
			<view class="hint">
				作品 <text v-if="works.length>0"
					style="color: #FFFFFF;font-size: 30upx;padding-left: 20upx;">{{works.length}}</text> <text v-else
					style="color: #fff;font-size: 30upx;padding-left: 20upx;">0</text>
			</view>
			<scroll-view scroll-y="" class="works_center" @scrolltolower='bottomScroll' v-if="works.length>0">
				<view class="works_box">
					<view v-for="(item,index) in works" :index="index">
						<view class='item' @click="navPlayer(item.uid,index)" style="margin-top: 10upx;">
							<image :src='item.cover_img'></image>
							<!-- 	<view class="like_box">
									<image src="../../../static/images/img/like_live.png"></image>
									<view>{{item.praise_num}}</view>
								</view> -->
							<text class="title">{{item.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="width: 100%;height: 500upx;display: flex;justify-content: center;align-items: center;" v-else>
				<image src="../../static/dixia.png" mode="" style="width: 280upx;height: 280upx;"></image>
			</view>
		</view>

		<view class="popup_box">
			<uni-popup ref="popup" type="bottom">
				<view class='center'>
					<view class='content' @click="openMap">腾讯地图</view>
					<view class="cancel" @click="cencel">取消</view>
				</view>
			</uni-popup>
			<uni-popup ref="tel" type="bottom">
				<view class='center'>
					<view class='content' @click="callTel">{{info.telephone}}</view>
					<view class="cancel" @click="cencelTel">取消</view>
				</view>
			</uni-popup>
			<uni-popup ref="complaint" type="bottom">
				<view class='center'>
					<view class='content' @click="callTel">{{info.telephone}}</view>
					<view class="cancel" @click="cencelTel">提交</view>
				</view>
			</uni-popup>
			<complanit ref="complanit"></complanit>
			<uni-popup ref="cebian" type="right">
				<view class='youce'>
					<view class="qsan">
						<view @click="tocart">
							<image src="../../static/cart.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">购物车</text>
						</view>
						<view @click="todingdan">
							<image src="../../static/dingdan.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">订单</text>
						</view>
						<view @click="dizhi">
							<image src="../../static/dizhi.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">收货地址</text>
						</view>
					</view>
					<view class="qsan">
						<view @click="toshop">
							<image src="../../static/shopg.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">商家管理</text>
						</view>
						<view @click="juan">
							<image src="../../static/juan.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">优惠券</text>
						</view>
						<view @click="toguanzhu()">
							<image src="../../static/guanzhu.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">我的关注</text>
						</view>
					</view>
					<view class="housi">
						<view @click="showPopUpBox()">
							<image src="../../static/help.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">帮助</text>
						</view>
						<view @click="set">
							<image src="../../static/set.png" mode="" style="width: 34upx;height: 34upx;"></image>
							<text style="font-size: 30upx;color: #FEFEFE;">设置</text>
						</view>
					</view>
				</view>
			</uni-popup>
			<view class="popUpBox" v-if="showBox == 1">
				<view class="tel">
					<image :src="cosUrl+'images/tel.png'"></image>
				</view>
				<view class="text f30 c3" style="margin-top: 33upx;"> 客服热线</view>
				<view class="text f30 c3">{{serviceHotline}}</view>
				<view class="button" @click="dail(serviceHotline)">拨打电话</view>
				<view class="cancel" @click="hideMask()">
					<u-icon name="close-circle" color="#eee" size="48"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import worksItem from '@/components/video/worksItem.vue'
	import avatar from '@/components/avatar.vue'
	import complanit from '@/components/complaint.vue'
	// import {uniPopup} from '@dcloudio/uni-ui'
	export default {
		data() {
			return {
				info: {
					shop_name: '',
					totalshop_num: {
						goods_num: ''
					},
					shengshiqu: '',
					isguan: true,
					address: '',
					shop_desc: '',
					alivetime: ''
				},
				works: [],
				cosUrl: '',
				works_num: '',
				clickLoading: false,
				shop_id: '',
				useinfo: {},
				serviceHotline: '',
				page: 1,
				isUpdate: true,
				userId: '',
				pan: 1,
				showBox: 0,
				sexindex: '',
				resume_url: ''
			}
		},
		components: {
			avatar,
			worksItem,
			complanit
		},
		mounted() {
			// this.userInfo = this.$store.getters.getuserInfo
		},
		onShow() {


			// this.getreadprofile()


		},
		onLoad(options) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {

					this.userInfo = JSON.parse(value)
				} else {
					this.userInfo = {}
				}
			} catch (e) {
				// error
			}

			this.userId = options.userId

			this.cosUrl = this.STATICURL
			this.bgheadSrc = `url(${this.STATICURL}images/bg-myHead.jpg)`
			this.initData(options.userId)

			this.getServiceHotline();
			console.log(1111111111111, options.userId)
			if (this.userInfo) {
				this.userId = options.userId
				console.log(11111111111111111111111111111)
				uni.request({
					url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid: options.userId,
						br_uid: this.userInfo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "用户信息")
						this.useinfo = res.data.data
					}
				});
			} else {
				console.log(2222222222222222222222222222222)
				uni.request({
					url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid: options.userId,
						br_uid: ''
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "用户信息")
						this.useinfo = res.data.data
					}
				});
			}

			uni.request({
				url: 'https://dsx.cdzer.com/api/MemberInfo/user_video', //仅为示例，并非真实接口地址。
				data: {
					uid: options.userId,
					page: this.page,
					br_uid:this.userInfo.id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "上传视频")
					if (res.data.status == 400) {
						this.works = []
					} else {
						this.works = res.data.data.video_list
					}
				}
			});
		},
		computed: {
			getapplyDistributorBanner() {
				return this.STATICURL + 'images/distribution/bg-applyDistributor.jpg'
			},
			getImgInviteBanner() {
				return this.STATICURL + 'images/distribution/img-invite3.png'
			},
		},
		methods: {
			tosixin(id) {
				if (JSON.stringify(this.userInfo) !== '{}') {
					console.log(this.useinfo,"this.useinfo")
					var name = this.useinfo.user_name
					var userId = this.useinfo.id
					uni.navigateTo({
						url: `/pages/businessSon/chat?toId=${id}&name=${name}&userId=${userId}`
					})
				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}
				
			},
			previewImg(logourl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = _this.useinfo.headimgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			infouse() {
				uni.request({
					url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						uid: this.userId,
						br_uid: this.userInfo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "用户信息")
						this.useinfo = res.data.data
					}
				});
			},
			guanzhu() {
				console.log(this.userInfo,"this.userInfothis.userInfo")
				
				if (JSON.stringify(this.userInfo) !== '{}') {
					if (this.userInfo.status == 400) {
						uni.navigateTo({
							url: '/pagesB/login/login'
						})
					}else{
						this.isguan = false
						let br_uid = this.useinfo.id
						let shop_id = 0
						let uid = this.userInfo.id
						uni.request({
							url: 'https://dsx.cdzer.com/api/CollShops/coll', //仅为示例，并非真实接口地址。
							data: {
								br_uid,
								shop_id,
								uid
							},
							method: 'POST',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
							},
							success: (res) => {
								console.log(res)
								if (res.data.status == 200) {
									uni.showToast({
										title: '关注成功',
										icon: 'none'
									})
									this.infouse()
									this.video.follow_num++
									this.$emit('setFollow', 'true')
								
									console.log('取消', this.video.is_follow)
								} else if (res.mess == "请先登录") {
									this.open()
								}
								this.clickLoading = false
							}
						});
					}
					
				} else {
					uni.navigateTo({
						url: '/pagesB/login/login'
					})
				}
				console.log(this.useinfo, "666")
			},
			set() {
				uni.navigateTo({
					url: '/pagesB/setting/setting'
				})
			},
			getServiceHotline() {
				this.$http.getserviceHotline().then(res => {
					if (res.status == 200) {
						this.serviceHotline = res.data.serviceHotline;

					}
				})
			},
			showPopUpBox() {
				this.showBox = 1;
			},
			hideMask() {
				this.showBox = 0;
			},
			juan() {
				uni.navigateTo({
					url: '/pagesB/coupon/coupon'
				})

			},
			toguanzhu() {
				uni.switchTab({
					url: '/pages/homeSon/classification'
				})
			},

			toshop() {

				uni.navigateTo({
					url: `/pagesB/seller/index?shop_id=0`
				})
			},
			tocart() {
				uni.switchTab({
					url: '/pages/tabBar/Cart'
				})
			},
			todingdan() {
				uni.navigateTo({
					url: `/pagesC/homeSon/allOrder?index=0`
				})
			},
			dizhi() {
				uni.navigateTo({
					url: '/pagesB/personalSon/address'
				})
			},
			tobianji() {
				var a = 1
				var items = JSON.stringify(this.useinfo)
				uni.navigateTo({
					url: `/pages/tabBar/bianji/index?type=${a}&item=${items}`
				})
			},
			toshipin() {
				uni.navigateTo({
					url: '/pages/tabBar/shipin/fabu'
				})
			},
			navPlayer(id, index) {
				var shipin = JSON.stringify(this.works)
				var typed = 1
				this.$store.commit('setPlayList', this.works)
				console.log(this.$store)
				uni.navigateTo({
					url: '/pagesC/home/shopPlyer/shopPlyer?shpo_id=' + id + '&index=' + index + '&page=' + this
						.page + '&shipin=' + shipin + '&typed=' + typed
				})

			},
			ziliao() {
				uni.navigateTo({
					url: `../../ziliao?shopId=${this.shop_id}`
				})
			},
			bottomScroll() {
				if (!this.isUpdate) return
				// this.page++
				this.initCenter()
			},
			initCenter() {
				this.isUpdate = false
				console.log(this.userId, "this.userId")
				uni.request({
					url: 'https://dsx.cdzer.com/api/MemberInfo/user_video', //仅为示例，并非真实接口地址。
					data: {
						uid: this.userId,
						page: this.page,
						br_uid:this.userInfo.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "上传视频")
						if (res.data.status == 400) {
							this.works = []
						} else {
							this.works = res.data.data.video_list
						}
					}
				});
			},
			initData(shop_id) {
				// this.initCenter(shop_id)
				// this.$http.shop_info({
				// 	 shop_id,
				// }).then(res=>{
				// 	 console.log(res)
				// 	 if(res.status == 200){
				// 		 this.info = res.data

				// 		 uni.setNavigationBarTitle({
				// 			title:this.info.shop_name
				// 		 })
				// 	 }
				// }).catch(err=>{

				// }) 
			},
			openMap() {

				const latitude = parseFloat(this.info.lat)
				const longitude = parseFloat(this.info.lng)
				console.log(latitude, longitude)
				wx.openLocation({
					latitude,
					longitude,
					scale: 18
				})

			},
			callTel() {
				uni.makePhoneCall({
					phoneNumber: this.info.telephone
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			opens() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.cebian.open('right')
			},
			openTel() {
				this.$refs.tel.open('bottom')
			},
			cencel() {
				this.$refs.popup.close()
			},
			cencelTel() {
				this.$refs.tel.close()
			},
			navLive() {
				uni.navigateTo({
					url: '../LiveDynamic/LiveDynamic?id=' + this.info.id
				})
			},
			navShopActive() {
				uni.navigateTo({
					url: '../shopActive/shopActive?id=' + this.info.id
				})
			},
			navWindowcase() {
				console.log('触发')
				uni.navigateTo({
					url: `../../home/showcase/showcase?id=${this.info.id}&name=${this.info.shop_name}&num=${this.info.totalshop_num.sell_total_num}`
				})
			},
			openplanit() {
				this.$refs.complanit.open()
			},

			reduceFollow() {
			if (JSON.stringify(this.userInfo) !== '{}') {
				this.clickLoading = true
				let br_uid = this.useinfo.id
				let shop_id = 0
				let uid = this.userInfo.id
				uni.request({
					url: 'https://dsx.cdzer.com/api/CollShops/cancelcoll', //仅为示例，并非真实接口地址。
					data: {
						br_uid,
						shop_id,
						uid
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						if (res.data.status == 200) {
							console.log('取消')
							uni.showToast({
								title: '取关成功',
								icon: 'none'
							})
							uni.request({
								url: 'https://dsx.cdzer.com/api/MemberInfo/getuserinfo', //仅为示例，并非真实接口地址。
								method: 'POST',
								data: {
									uid: this.userId,
									br_uid: this.userInfo.id
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded',
								},
								success: (res) => {
									console.log(res, "用户信息")
									this.useinfo = res.data.data
								}
							});
							this.userInfo.is_follow = 0
						}
						this.clickLoading = false
					}
				});
			} else {
				uni.navigateTo({
					url: '/pagesB/login/login'
				})
			}
				
				
			},

		}
	}
</script>

<style lang='less'>
	.sixin {
		width: 170upx;
		height: 74upx;
		background-color: rgb(36, 39, 48);
		border-radius: 10upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.header {
		position: fixed;
		background-color: #000000;
		height: 110upx;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		z-index: 100;
		align-items: center;
		padding-left: 30upx;
	}

	.toutou {
		background: url(../../static/uerback.png) no-repeat;
		background-size: cover;
		width: 100%;
		height: 280upx;
		display: flex;
		justify-content: flex-end;
	}

	.popUpBox {
		position: fixed;
		width: 402upx;
		height: 452upx;
		background: #fff;
		z-index: 999;
		border-radius: 20upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.tel {
			text-align: center;
			margin-top: -25upx;

			image {
				width: 174upx;
				height: 174upx;
			}
		}

		.text {
			line-height: 43upx;
			font-weight: bold;
			text-align: center;
		}

		.button {
			width: 247upx;
			height: 66upx;
			border-radius: 45upx;
			position: absolute;
			bottom: 36upx;
			left: 50%;
			transform: translate(-50%, 0)
		}

		.cancel {
			width: 53upx;
			height: 53upx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -75upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.youce {
		width: 480upx;
		height: 100%;
		background-color: #242730;
		padding: 30upx 40upx;
	}

	.qsan {
		display: flex;
		flex-direction: column;
		border-bottom: 2upx solid #52586A;
		padding-bottom: 80upx;

		view {
			display: flex;
			align-items: center;
			width: 100%;
			/* justify-content: center; */
			margin-top: 80upx;
		}

		text {
			padding-left: 30upx;
		}
	}

	.housi {
		display: flex;
		flex-direction: column;
		padding-bottom: 80upx;

		view {
			display: flex;
			align-items: center;
			width: 100%;
			/* justify-content: center; */
			margin-top: 80upx;
		}

		text {
			padding-left: 30upx;
		}
	}

	.hui {
		width: 340upx;
		height: 80upx;
		background: #242730;
		color: #FFFFFF;
		font-size: 30upx;
		text-align: center;
		line-height: 80upx;
		border-radius: 20upx;
	}

	uni-input {
		font-size: 36upx;
		color: #fff;
	}

	.follow {
		width: 46vw;
		height: 74rpx;
		background-color: #ff3d3d;
		border-radius: 10rpx;
		text-align: center;
		line-height: 74rpx;
	}

	.tou {
		display: flex;
		/* padding: 30upx; */
		flex-direction: column;
		/* align-items: center; */
		justify-content: flex-start;

	}

	.jieshao {
		/* padding: 30upx; */
	}

	.across {
		display: flex;
	}

	.vertical {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.person_box {
		background-color: rgba(0, 0, 0);
		width: 100vw;
		height: 100vh;
		overflow: scroll;

		.person_top {
			align-items: center;
			width: 94vw;
			justify-content: space-between;
			padding: 20rpx 0;
			margin: 0 3vw;
			color: #fff;
		}

		.person_top {
			.avatar_box {
				position: relative;

				view {
					font-size: 36rpx;
				}

				.shop_name {
					position: absolute;
					bottom: -38rpx;
					white-space: nowrap;
				}
			}

			.follow {
				width: 58vw;
				height: 74rpx;
				background-color: #ff3d3d;
				border-radius: 10rpx;
				text-align: center;
				line-height: 74rpx;
			}

			.more_btn {
				width: 74rpx;
				height: 74rpx;
				background-color: #242730;
				border-radius: 10rpx;

				image {
					margin-left: 15rpx;
					margin-top: 33rpx;
					width: 44rpx;
					height: 8rpx;
				}
			}
		}

		.person_center {
			margin: 20rpx 3vw;
			/* width: 94vw; */

			/* height: 340rpx; */
			.info_box {
				height: 88rpx;
				width: 94vw;
				color: #fff;
				padding: 0 15rpx;
				background-color: #242730;
				border-radius: 10rpx;
				justify-content: space-between;
				align-items: center;

				view {
					width: 60%;
					overflow: hidden;
					white-space: nowrap;
					line-height: 88rpx;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}

				.handle {
					width: 20vw;
					justify-content: space-around;
				}
			}


			.desc_box {
				/* width: 94vw; */
				/* width: 160upx; */
				/* height: 60upx; */
				/* font-size: 30rpx; */
				color: #ffffff;
				margin-top: 30rpx;
				/* line-height: 30rpx; */
				text-align: center;
				background: #242730;
				letter-spacing: 2rpx;
				padding: 10rpx 20rpx;
			}

			.desc_boxw {
				/* width: 94vw; */
				/* 				min-width: 200upx;
				max-width: 460upx; */
				/* border-radius: 20upx; */
				/* height: 60upx; */
				font-size: 30rpx;
				padding: 10rpx 20rpx;
				color: #ffffff;
				margin-top: 30rpx;
				/* line-height: 60rpx; */
				text-align: center;
				background: #242730;
				letter-spacing: 2rpx;
			}

			.nums_box {
				width: 40vw;
				justify-content: space-between;
				color: #999999;
				margin: 10rpx 0;
				font-size: 30rpx;

				.bold {
					color: #ffffff;
					margin-right: 5rpx;
				}
			}

			.hint_box {
				/* margin-top: 20rpx; */
				width: 94vw;
				overflow-y: auto;
				justify-content: flex-start;

				.across {
					flex-shrink: 0;
					margin-right: 6vw;

					.img_box {
						width: 75rpx;
						height: 74rpx;
						background-color: #242730;
						border-radius: 10rpx;

						image {
							width: 34rpx;
							height: 32rpx;
							margin-left: 20rpx;
							margin-top: 21rpx;
						}
					}

					.vertical {
						font-size: 24rpx;
						margin-left: 10rpx;
						color: #999;

						.title {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
			}
		}

		.works {
			margin: 30rpx 3vw;
			width: 94vw;

			.hint {
				font-size: 30rpx;
				color: #fffefe;
			}

			.works_center {
				height: calc(100vh - 700rpx);

				.works_box {
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-right: 1vw;
						position: relative;
						display: flex;
						flex-direction: column;

						.title {
							font-size: 30upx;
							width: 215upx;
							text-align: center;
							border-radius: 0px 0px 10upx 10upx;
							background-color: #242730;
							padding: 6upx;
							color: #fff;
							white-space: nowrap; //规定段落中的文本不进行换行
							text-overflow: ellipsis;
							overflow: hidden;
						}

						image {
							width: 30vw;
							height: 40vw;
						}

						view {
							position: relative;

						}

						.like_box {
							position: absolute;
							left: 15rpx;
							bottom: 60rpx;
							color: #fff;
							font-size: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 21rpx;
								height: 18rpx;
								z-index: 2;
								margin-right: 5rpx;
							}
						}
					}
				}


			}

		}

		.popup_box {
			.center {
				height: 276rpx;
				background-color: #f5f5f5;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.content {
					height: 120rpx;
					text-align: center;
					line-height: 120rpx;
					font-size: 36rpx;
					border-top-right-radius: 15rpx;
					border-top-left-radius: 15rpx;
					background-color: #fff;
				}

				.cancel {
					line-height: 120rpx;
					height: 120rpx;
					text-align: center;
					font-size: 30rpx;
					background-color: #fff;
				}
			}
		}

		::-webkit-scrollbar {
			display: none
		}
	}
</style>
